<template>
  <view class="circle-box">
    <scroll-view
      :scroll-y="true"
      class="cricle-sticky"
      :refresher-enabled="true"
      :refresher-triggered="pulling"
      lower-threshold="60"
      @refresherrefresh="pull"
      @scrolltolower="loadMore"
    >
      <Empty title="暂时没有内容" v-if="!loading && list.length === 0" />
      <block v-else>
        <Item
          v-for="(item, index) in list"
          :circle="item"
          :key="item.content_id"
          @reply="e => handleReply(e, index)"
          @report="handleReport"
        />
        <view class="loading-more" v-if="finished">
          已全部加载完毕
        </view>
        <view class="loading-more" v-if="loading && !pulling">
          正在加载...
        </view>
      </block>
    </scroll-view>
  </view>
</template>

<script>
import Item from '../common/circle/index'
import { navigateTo } from '@utils/index'
import { getCircleList, getDetail } from '@requests/circle'
import Empty from '@components/common/empty'

export default {
  name: 'CircleList',
  components: {
    Item,
    Empty
  },
  props: {
    circles: {
      type: Array,
      default: () => []
    },
    type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pulling: false
    }
  },
  created() {
    this.getList(0)
  },
  methods: {
    pull() {
      if (this.pulling) {
        return
      }
      this.pulling = true
      setTimeout(() => {
        this.finished = false
        this.getList(0)
      }, 1000)
    },
    handleReply(e, index) {
      this.$emit('reply', { ...e, index })
    },
    handleReport(e) {
      this.$emit('report', e)
    },
    getList(lastId) {
      const type = this.type
      if (this.loading || this.finished) {
        return
      }
      this.loading = true
      getCircleList(lastId, type).then(res => {
        this.loading = false
        this.pulling = false
        const list = res.result.list
        if (list.length === 0) {
          if (lastId === 0) {
            this.list = []
          }
          this.finished = true
          return
        }
        this.list = lastId > 0 ? [...this.list, ...list] : list
      })
    },
    refresh(index) {
      getDetail(this.list[index].content_id).then(res => {
        this.list[index] = res.result
        this.list = [...this.list]
      })
    },
    loadMore() {
      this.getList(this.list[this.list.length - 1].content_id)
    }
  }
}
</script>

<style>
.circle-box {
  height: calc(100vh - 250rpx);
  overflow: hidden;
}
.cricle-sticky {
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  overflow: auto;
  padding-top: 24rpx;
}
.loading-more {
  text-align: center;
  font-size: 24rpx;
  padding: 0 0 24rpx;
}
</style>
